<template>
  <basic-container>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="个人信息" name="first">
        <el-row>
          <el-col :span="6">
            <el-form :model="form" ref="informationForm" label-width="70px">
              <el-form-item label="头像">
                <el-upload
                    class="avatar-uploader"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <img src="@/assets/images/business-system/user-picture.png" v-else class="avatar-uploader-icon"/>
                    <template #tip>
                      <div class="el-upload__tip">
                        只能上传jpg/png用户头像，且不超过500kb
                      </div>
                    </template>
                 </el-upload>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="用户名" prop="name2">
                <el-input v-model="form.name2" />
              </el-form-item>
              <el-form-item label="手机号" prop="name3">
                <el-input v-model="form.name3" />
              </el-form-item>
              <el-form-item label="邮箱" prop="name4">
                <el-input v-model="form.name4" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="resetInformationHandle">清空</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <el-row>
          <el-col :span="6">
            <el-form :model="form" ref="passwordForm" label-width="70px">
              <el-form-item label="原密码" prop="oldPassword">
                <el-input v-model="form.oldPassword" type="password" placeholder="请输入原密码"/>
              </el-form-item>
              <el-form-item label="新密码" prop="newPassword">
                <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码"/>
              </el-form-item>
              <el-form-item label="确认密码" prop="yeahPassword">
                <el-input v-model="form.yeahPassword" type="password" placeholder="请输入确认密码"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button @click="resetPasswordHandle">清空</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </basic-container>
</template>
<script setup>
const activeName = ref('first');
const form = ref({
  imageUrl: '',
  name: '',
  name2: '',
  name3: '',
  name4: '',
  oldPassword: '',
  newPassword: '',
  yeahPassword: '',
});
const informationForm = ref(null);
const passwordForm = ref(null);

const handleClick = () => {
  console.log('tab点击');
};
const resetInformationHandle = () => {
  informationForm.value.resetFields();
};
const resetPasswordHandle = () => {
  passwordForm.value.resetFields();
};
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color) !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
</style>
<style lang="scss" scoped>
@import '../../../assets/style/bussines-system/personal-information/index.scss';
</style>
